import React from "react"
import {inject,observer} from "mobx-react"
import loadable from "@loadable/component"
import {Route} from "react-router-dom"
@inject("user")
@observer

class PrivateRoute extends React.Component {
    constructor() {
        super();
        this.state={
            list:[]
        }
    }
    //生成路由
    bindRoute(list){
        let routerList = list.map((item)=>{
            if(item.menuChilds.length == 0){
                //没有子菜单
                //动态加载组件

                return <Route key={item.menuId} path={item.menuUrl}
                      component={loadable(()=>import(`../$item.componentPath`))}/>
            }else {
                if(item.isContainChildren){ //嵌套在父级中，记得在在父组件中，添加 {this.props.children}在要嵌套的位置
                    return  <Route key={item.menuId} path={item.menuUrl} render={() =>{
                        let ComponentName =loadable(() => import(`../${item.componentPath}`));
                        return <ComponentName {...this.props}>
                            {this.bindRoute(item.menuChilds)}
                        </ComponentName>
                    }}>
                    </Route>
                }else{ //不嵌套显示
                    return [...this.bindRoute(item.menuChilds),
                        <Route key={item.menuId} path={item.menuUrl}
                        component={ loadable(() => import(`../${item.componentPath}`))}/>]
                }

            }
        })
        return routerList;
    }
    componentDidMount() {
        let menuList = this.props.user.user.menuInfo ;
        let listRouter = this.bindRoute(menuList);
        this.setState({
            list : listRouter
        })
    }

    render() {
        return (
            <div>
                {this.state.list}
            </div>
        )
    }
}

export {PrivateRoute as default}